<template>
  <div :class="className" :style="{height:height,width:width}" />

</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  export default {
    // mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart',

      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '250px'
      },
      chuzhang:{
        num:[],
        riqi:[],
      },
    },

    data() {
      return {
        chart: null,
        shuzhudata:[2.5,8,99],
        nameArr:['中旬','下旬','上旬'],
        option: {}
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })

    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      chuzhang(curVal,oldVal){

        if(curVal){
          this.initChart()
        }
      },
    },
    created() {


    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.shuzhudata = this.chuzhang.num
        this.nameArr = this.chuzhang.riqi
        this.option = {
          legend: {
            name: ['环比'],
            right: 10,
            top: 20,
          },
          grid: {
            left: '15% '
          },
          tooltip: {
            trigger: 'axis',

          },
          xAxis: [{
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: "#8fe3f8"
              }
            },
            splitArea: {
              color: '#8fe3f8',
              lineStyle: {
                color: '#8fe3f8'
              },
            },
            axisLabel: {
              lineStyle: {
                color: "#8fe3f8"
              }
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data:this.nameArr,

          }],

          yAxis: [{
            name: "出账金额(万元)",
            nameTextStyle: {
              color: "#8fe3f8",
              fontSize: 14,
            },
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#8fe3f8"
              }
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: '#8fe3f8',

              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#8fe3f8"
              }
            },
          }],
          series: [{
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#8fe3f8",
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#8fe3f8',
              }
            },
            itemStyle: {
              color: "#6c50f3",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(108,80,243,0.3)'
                },
                  {
                    offset: 1,
                    color: 'rgba(108,80,243,0)'
                  }
                ], false),
                shadowColor: 'rgba(108,80,243, 0.9)',
                shadowBlur: 20
              }
            },
            data:this.shuzhudata
          }]
        }
        this.chart.setOption(this.option)
      },

    }
  }
</script>
